<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			#smallImg {
				position: absolute;
				left: 50px;
				top: 100px;
			}
			#smallImg, #smallImg img {
				width: 200px;
				height: 200px;
			}
			#smallArea {
			 	display: none; 
			 	width: 50px; height: 50px; background: rgba(200, 222,111, 0.3); 
			 	position: absolute; left: 50px; top: 0;
			}
			
			#bigArea {
				 display: none; overflow: hidden; 
				 width: 300px; height: 300px; background: rgba(200,111,222,0.3); 
				 position: absolute; left: 300px; top: 100px;
			}
			#bigImg {
				width: 800px; height: 800px;
				position: absolute; left: 0; top: 0;
			}
			
		</style>
		
		<script type="text/javascript" src="js/jquery-1.12.3.js" ></script>
		<script>
			$(function(){
				
				//等比公式
				//小图width/大图width == 小区域width/大区域width
				$("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() );
				$("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() );
				
				//放大系数
				var scale = $("#bigImg").width() / $("#smallImg").width();
				
				//在小图中移动
				$("#smallImg").mousemove(function(e){
					$("#smallArea").show(); //显示小区域
					$("#bigArea").show(); //显示大区域
					
					
					var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2;
					var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2;
					
					//控制不超出左右边界
					if (x < 0){
						x = 0;
					}
					else if (x > $("#smallImg").width()-$("#smallArea").width()){
						x = $("#smallImg").width()-$("#smallArea").width();
					}
					//控制不超出上下边界
					if (y < 0){
						y = 0
					}
					else if (y > $("#smallImg").height()-$("#smallArea").height()) {
						y = $("#smallImg").height()-$("#smallArea").height();
					}
					
					//小区域移动
					$("#smallArea").css({left:x, top:y});
					
					//大图移动
					$("#bigImg").css({left: -scale*x,top: -scale*y});
				})
				
				//移除小图
				$("#smallImg").mouseleave(function(){
					$("#smallArea").hide(); //隐藏小区域
					$("#bigArea").hide(); //隐藏大区域
				})
			})
		</script>
	</head>
	<body>
		<div id="smallImg">
			<img src="images/星际穿越.jpg" />
			<div id="smallArea"></div>
		</div>
		<div id="bigArea">
			<img id="bigImg" src="images/星际穿越.jpg" />
		</div>		
	</body>
</html>
